<template>
  <div class="information">
    <div class="container information-content">
      <information-search />
      <div class="middle-content">
        <div class="middle-on">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in images" :key="item.img">
              <img class="building-img" :src="item.url" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="middle-down">
          <div class="middle-down-content">
            <div class="contents">
              <span class="title">离工地最近</span>
              <div class="contents-text">
                <span>按收货地址最近排序</span>
              </div>
              <div class="image">
                <img
                  class="tools-img"
                  src="../../../assets/images/building.png"
                  alt=""
                >
              </div>
            </div>
          </div>
          <div class="middle-down-content">
            <div class="contents">
              <span class="title">价格最优</span>
              <div class="contents-text">
                <span>按总价最优进行排序</span>
              </div>
              <div class="image">
                <img
                  class="tools-img"
                  src="../../../assets/images/price-good.png"
                  alt=""
                >
              </div>
            </div>
          </div>
          <div class="middle-down-content">
            <div class="contents">
              <span class="title">运费最低</span>
              <div class="contents-text">
                <span>实时计算出商品运费</span>
              </div>
              <div class="image">
                <img
                  class="tools-img"
                  src="../../../assets/images/freight.png"
                  alt=""
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="title">
          <img
            class="avatar-img"
            src="../../../assets/images/avatar-img.png"
            alt=""
          >
          <span>Hi~欢迎来到阿奇数</span>
        </div>
        <div class="btn">
          <button type="button" class="btn-login" @click="GoLogin">登录</button>
          <button type="button" class="btn-registered" @click="GoRegistered">
            注册
          </button>
        </div>
        <div class="line" />
        <ul class="content">
          <li class="content-text text">
            <span>网站公告</span><el-link
              :underline="false"
              @click="GoBulletin"
            >更多<i
              class="el-icon-arrow-right"
            /></el-link>
          </li>
          <li v-for="item in listBulletinData" :key="item.id" class="content-text text-line-1" @click="GoDetail(item.id)">
            <el-link :underline="false">{{ item.bulletinIntroduct }}</el-link>
          </li>

        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { listBulletin } from '@/api/web-site-announcement'
import InformationSearch from './InformationSearch'
export default {
  name: 'Information',
  components: {
    InformationSearch
  },
  props: {
    images: Array
  },
  data() {
    return {
      listBulletinData: [],
      pageSize: 7,
      pageIndex: 1
    }
  },
  created() {
    this.listBulletin()
  },
  methods: {
    listBulletin() {
      listBulletin(this.pageIndex, this.pageSize).then(res => {
        this.listBulletinData = res.data.records
        const d = JSON.stringify(res.data.records)
        localStorage.setItem('listBulletinData', d)
      })
    },
    GoLogin() {
      this.$router.push({
        path: '/login'
      })
    },
    GoRegistered() {
      this.$router.push({
        path: '/register'
      })
    },
    GoDetail(id) {
      this.$router.push({
        path: '/information-detail',
        query: {
          id,
          type:0
        }
      })
    },
    GoBulletin() {
      this.$router.push({
        path: '/bulletin-list'
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import "@/assets/style/common.scss";
.information {
  background: #f5f5f5;
  .information-content {
    display: flex;
    .middle-content {
      width: 575px;
      height: 450px;
      margin-right: 20px;
      margin-top: 26px;
      .middle-on {
        width: 572px;
        height: 308px;
        .building-img {
          width: 572px;
          height: 308px;
        }
      }
      .middle-down {
        display: flex;
        .middle-down-content {
          width: 189px;
          height: 147px;
          background: #ffffff;
          margin-right: 2px;
          cursor: pointer;
          .contents {
            margin: 13px 0 0 13px;
            .title{
              color: #514A43;
              font-size: 16px;
              font-weight: 400;
            }
            .contents-text {
              span{
                color: #999999;
              }
              font-size: 12px;
              margin-bottom: 20px;
            }
          }
          .image {
            display: flex;
            justify-content: flex-end;
            .tools-img {
              width: 98px;
              height: 69px;
            }
          }
        }
      }
    }
    .right-content {
      width: 280px;
      height: 450px;
      background: #ffffff;
      margin-top: 26px;
      .title {
        display: flex;
        align-items: center;
        margin: 30px 0 0 21px;
        .avatar-img {
          width: 58px;
          height: 58px;
          margin-right: 25px;
        }
      }
      .btn {
        display: flex;
        margin: 30px 0 0 46px;
        .btn-login {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 103px;
          height: 30px;
          background: rgba(255, 59, 48, 1);
          border-radius: 15px;
          color: #ffffff;
          margin-right: 10px;
        }
        .btn-registered {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 103px;
          height: 30px;
          border: 1px solid rgba(175, 175, 175, 1);
          border-radius: 15px;
        }
      }
      .line {
        margin: 32px 0 18px 0;
        border-bottom: 1px solid #f5f5f5;
      }
      .content {
        margin: 0 18px 0 21px;
        .content-text {
          margin-bottom: 8px;
          font-size: 12px;
        }
        .text {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}

/deep/ .down{
  .el-input__inner{
    height: 30px;
    width: 164px;
  }
  .el-form-item{
    margin-bottom: 0px;
  }
  .el-input-number{
    width: 164px;
    line-height: 28px;
  }
}
/deep/ .middle-on {
  .el-carousel__indicators--outside {
    bottom: 0px;
    text-align: center;
    position: absolute;
    left: 240px;
  }
}
</style>
